import styles from '../css分支/My_huanjing.module.css'
import { Arrow, ArrowLeft, Close, ClockO, Edit } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import { Tabs, Search } from 'react-vant'
import axios from 'axios';
import React, { useEffect, useRef, useState } from 'react'
import { Card, Price, Tag,Toast } from '@nutui/nutui-react'
import { Checkbox, Cell } from '@nutui/nutui-react'
import { Button, Switch } from 'react-vant'
import { Uploader } from '@nutui/nutui-react'
export default function My_huan() {
  const [list, setlist] = useState({})
  const getlist = async () => {
    let res = await axios.get('http://localhost:3000/xzx/business')
    setlist(res.data.data)
  }
  useEffect(() => {
    getlist()
  }, [])
  const navigate = useNavigate()
  //上传图片开始
  const uploadUrl = 'http://localhost:3000/xzx/xu_uploads'; // 替换为你的后端接口地址
  const [userMessage, setUserMessage] = useState({})
  const onPutUserHead = async (path) => {
    let res = await axios.post('http://localhost:3000/xzx/putUserHead', { head: path })
    if (res.code == 200) {
        setUserMessage({ ...userMessage, head: path })
    }
}
  const beforeUpload = async (files) => {
    const allowedTypes = ['image/png', 'image/jpeg', 'image/gif']; // 允许的文件类型
    const filteredFiles = Array.from(files).filter((file) =>
      allowedTypes.includes(file.type)
    );

    if (filteredFiles.length === 0) {
      Toast.fail('只允许上传 PNG、JPEG 或 GIF 文件');
      return []; // 返回空数组表示不允许上传
    }

    return filteredFiles;
  };
  const onSuccess = (response) => {
    let res = JSON.parse(response.responseText)
    if (res.code == 200) {
      Toast.show({
        content: '上传成功',
        icon: 'success',
      });
      onPutUserHead(res.data.filePath)
      console.log('文件路径:', res.data.filePath);
      setUserMessage({ ...userMessage, head: res.data.filePath })
      getlist()
    } else {
      Toast.show({
        content: '上传失败',
        icon: 'fail',
      });
    }
  };

  // 文件上传失败后的回调
  const onFailure = () => {
    Toast.show({
      content: '上传失败，请重试',
      icon: 'fail',
    });
  };
  //上传图片结束  

  return (
    <div className=''>
      <div className={styles.head}>
        <ArrowLeft style={{ marginLeft: '0.1rem' }} onClick={() => { navigate('/shou/my') }} />
        <p style={{ fontSize: '0.22rem' }}>店铺环境</p>
        <p style={{ marginRight: '0.1rem' }}></p>
      </div>
      <div className={styles.body2}>
        <img src={`http://localhost:3000${list.img1}`} alt="" style={{ width: '100%', height: '100%', borderRadius: "0.1rem" }}/>
        <Uploader
        className={styles.gai2}
        beforeUpload={beforeUpload}
        url={uploadUrl}
        onSuccess={onSuccess}
        onFailure={onFailure}
        style={{
          marginInlineEnd: '10px',
          marginBottom: '10px',
        }}
      >
        <Edit style={{ fontSize: "0.3rem", color: 'green' }} />
      </Uploader>
      </div>
      <p className={styles.ppp}>门面图</p>
      <div className={styles.body}>
        <img src={list.img2} alt="" style={{ width: '100%', height: '100%', borderRadius: "0.1rem" }} />
        <Edit style={{ fontSize: "0.3rem", color: 'green' }} className={styles.gai} />
      </div>
      {/* <img className={styles.self_img_head} src={`http://localhost:3000${userMessage.head}`} alt="" /> */}
      {/* <Uploader
        beforeUpload={beforeUpload}
        url={uploadUrl}
        onSuccess={onSuccess}
        onFailure={onFailure}
        style={{
          marginInlineEnd: '10px',
          marginBottom: '10px',
        }}
      >
        <span style={{ fontSize: '0.16rem', color: '#737373' }}>点击修改图像</span>
      </Uploader> */}
      <p className={styles.ppp}>环境图</p>
      <div className={styles.body3}>
        <p >确定</p>
      </div>
    </div>
  )
}
